<template>
    <div class="resource">
        <Header colors="Resource"></Header>
        <div class="big-image">
            <img src="../../assets/img/banner-1.png" alt="">
        </div>
        <div class="channel-resources">
            <header>
                <span></span>
                <h2>百家精选渠道资源</h2>
            </header>
            <div class="content">
                <ul>
                    <li @click="change('AppStore')" :class="current_style">应用商店</li>
                    <li @click="change('Seo')" :class="current_style_1">ASO/SEO<br/>/SEM</li>
                    <li @click="change('ThirdParty')" :class="current_style_2">第三方渠道</li>
                    <li @click="change('Offline')" :class="current_style_3">线下渠道</li>
                </ul>
                <component :is="current"></component>
            </div>
        </div>
        <div class="media-resources">
            <header>
                <span></span>
                <h2>百万优质媒体资源</h2>
            </header>
            <div class="content">
                <ul>
                    <li @click="change_1('OnLine')" :class="current_style_4">线上媒体</li>
                    <li @click="change_1('NewMedia')" :class="current_style_5">新媒体</li>
                    <li @click="change_1('Traditional')" :class="current_style_6">传统媒体</li>
                </ul>
                <component :is="current_1"></component>
            </div>
        </div>
        <div class="client">
            <header>
                <span></span>
                <h2>他们都选择了指尖互动</h2>
            </header>
            <div class="content">
                <div>
                    <ul>
                    <li>
                        <div class="num">
                            <p><strong>50</strong>亿</p>
                            <i>+</i>
                        </div>
                        <p>受众用户</p>
                    </li>
                    <li>
                        <div class="num">
                            <p><strong>100</strong>万</p>
                            <i>+</i>
                        </div>
                        <p>知名品牌客户</p>
                    </li>
                    <li>
                        <div class="num">
                            <p><strong>100</strong>万</p>
                            <i>+</i>
                        </div>
                        <p>入住媒体</p>
                    </li>
                </ul>
                </div>
                <!-- <mt-swipe :auto="0">
                    <mt-swipe-item>
                        <strong>品牌客户</strong>
                        <p>知名品牌客户，深得行业广泛认可与信赖</p>
                        <ul>
                            <li><img src="../../assets/img/025.png" alt=""></li>
                            <li><img src="../../assets/img/026.png" alt=""></li>
                            <li><img src="../../assets/img/027.png" alt=""></li>
                            <li><img src="../../assets/img/028.png" alt=""></li>
                            <li><img src="../../assets/img/029.png" alt=""></li>
                            <li><img src="../../assets/img/030.png" alt=""></li>
                            <li><img src="../../assets/img/034.png" alt=""></li>
                            <li><img src="../../assets/img/035.png" alt=""></li>
                            <li><img src="../../assets/img/036.png" alt=""></li>
                        </ul>
                    </mt-swipe-item>
                    <mt-swipe-item>
                        <strong>渠道伙伴</strong>
                        <p>覆盖百亿用户群，聚合全球优质平台战略合作</p>
                        <ul>
                            <li><img src="../../assets/img/019.png" alt=""></li>
                            <li><img src="../../assets/img/020.png" alt=""></li>
                            <li><img src="../../assets/img/021.png" alt=""></li>
                            <li><img src="../../assets/img/022.png" alt=""></li>
                            <li><img src="../../assets/img/023.png" alt=""></li>
                            <li><img src="../../assets/img/024.png" alt=""></li>
                            <li><img src="../../assets/img/031.png" alt=""></li>
                            <li><img src="../../assets/img/032.png" alt=""></li>
                            <li><img src="../../assets/img/033.png" alt=""></li>
                        </ul>
                    </mt-swipe-item>
                    <mt-swipe-item>
                        <strong>媒体资源</strong>
                        <p>拥有90%微信、微博、网红等自媒体红人</p>
                        <ul>
                            <li><img src="../../assets/img/01.png" alt=""></li>
                            <li><img src="../../assets/img/05.png" alt=""></li>
                            <li><img src="../../assets/img/03.png" alt=""></li>
                            <li><img src="../../assets/img/07.png" alt=""></li>
                            <li><img src="../../assets/img/08.png" alt=""></li>
                            <li><img src="../../assets/img/09.png" alt=""></li>
                            <li><img src="../../assets/img/013.png" alt=""></li>
                            <li><img src="../../assets/img/014.png" alt=""></li>
                            <li><img src="../../assets/img/015.png" alt=""></li>
                        </ul>
                    </mt-swipe-item>
                </mt-swipe> -->
                <div class="swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <strong>品牌客户</strong>
                                <p>知名品牌客户，深得行业广泛认可与信赖</p>
                                <ul>
                                    <li><img src="../../assets/img/025.png" alt=""></li>
                                    <li><img src="../../assets/img/026.png" alt=""></li>
                                    <li><img src="../../assets/img/027.png" alt=""></li>
                                    <li><img src="../../assets/img/028.png" alt=""></li>
                                    <li><img src="../../assets/img/029.png" alt=""></li>
                                    <li><img src="../../assets/img/030.png" alt=""></li>
                                    <li><img src="../../assets/img/034.png" alt=""></li>
                                    <li><img src="../../assets/img/035.png" alt=""></li>
                                    <li><img src="../../assets/img/036.png" alt=""></li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <strong>渠道伙伴</strong>
                                <p>覆盖百亿用户群，聚合全球优质平台战略合作</p>
                                <ul>
                                    <li><img src="../../assets/img/019.png" alt=""></li>
                                    <li><img src="../../assets/img/020.png" alt=""></li>
                                    <li><img src="../../assets/img/021.png" alt=""></li>
                                    <li><img src="../../assets/img/022.png" alt=""></li>
                                    <li><img src="../../assets/img/023.png" alt=""></li>
                                    <li><img src="../../assets/img/024.png" alt=""></li>
                                    <li><img src="../../assets/img/031.png" alt=""></li>
                                    <li><img src="../../assets/img/032.png" alt=""></li>
                                    <li><img src="../../assets/img/033.png" alt=""></li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <strong>媒体资源</strong>
                                <p>拥有90%微信、微博、网红等自媒体红人</p>
                                <ul>
                                    <li><img src="../../assets/img/01.png" alt=""></li>
                                    <li><img src="../../assets/img/05.png" alt=""></li>
                                    <li><img src="../../assets/img/03.png" alt=""></li>
                                    <li><img src="../../assets/img/07.png" alt=""></li>
                                    <li><img src="../../assets/img/08.png" alt=""></li>
                                    <li><img src="../../assets/img/09.png" alt=""></li>
                                    <li><img src="../../assets/img/013.png" alt=""></li>
                                    <li><img src="../../assets/img/014.png" alt=""></li>
                                    <li><img src="../../assets/img/015.png" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
        <div class="top" v-show="backToTop">
            <a href="#"></a>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '../common/components/Header'
import Footer from '../common/components/Footer'
import AppStore from './components/AppStore'
import Seo from './components/Seo'
import ThirdParty from './components/ThirdParty'
import Offline from './components/Offline'
import OnLine from './components/OnLine'
import NewMedia from './components/NewMedia'
import Traditional from './components/Traditional'
import Swiper from 'swiper'
export default {
    name: 'Resource',
    data () {
        return{
            current: 'AppStore',
            current_1: 'OnLine',
            backToTop: false
        }
    },
    mounted(){
        new Swiper ('.swiper-container', {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
            },
            effect : 'slide',
            loop: true,
            speed: 1000 ,
            roundLengths : true,
            zoom: {
                toggle: false,
            },
            autoplay: {
                delay: 6000,
            },
        })
        window.addEventListener('scroll',this.backToTops)
    },
    components: {
        Header,
        Footer,
        AppStore,
        Seo,
        ThirdParty,
        Offline,
        OnLine,
        Traditional,
        NewMedia
    },
    methods: {
        change (s) {
            this.current = s
        },
        change_1 (a) {
            this.current_1 = a
        },
        backToTops () {
            this.scrollTop = window.scrollY
            if (this.scrollTop >= 400) {
                this.backToTop = true
                return
            }
            else {
                this.backToTop = false
            }
        }
    },
    computed: {
        current_style () {
            if(this.current == 'AppStore') {
                return {
                    active: true
                }
            }
        },
        current_style_1 () {
            if(this.current == 'Seo') {
                return {
                    active: true
                }
            }
        },
        current_style_2 () {
            if(this.current == 'ThirdParty') {
                return {
                    active: true
                }
            }
        },
        current_style_3 () {
            if(this.current == 'Offline') {
                return {
                    active: true
                }
            }
        },
        current_style_4 () {
            if(this.current_1 == 'OnLine') {
                return {
                    active: true
                }
            }
        },
        current_style_5 () {
            if(this.current_1 == 'NewMedia') {
                return {
                    active: true
                }
            }
        },
        current_style_6 () {
            if(this.current_1 == 'Traditional') {
                return {
                    active: true
                }
            }
        }
    }
}
</script>
<style scoped>
.resource {
    width: 100%;
}
.resource .big-image {
    width: 100%;
    height: 300px;
}
.resource .big-image img {
    width: 100%;
    height: auto;
}
.resource .channel-resources {
    margin-top: 100px;
}
.resource .channel-resources header,.resource .media-resources header,.resource .client header {
    text-align: center;
}
.resource .channel-resources header span,.resource .media-resources header span,.resource .client header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.resource .channel-resources header h2,.resource .media-resources header h2,.resource .client header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.resource .channel-resources .content,.resource .media-resources .content {
    margin: 0 auto;
    margin-top: 60px;
    width: 671px;
}
.resource .channel-resources .content ul,.resource .media-resources .content ul {
    height: 80px;
}
.resource .channel-resources .content ul li,.resource .media-resources .content ul li {
    width: 150px;
    height: 80px;
    border-radius: 30px; /*no*/
    font-size: 26px; /*px*/
    text-align: center;
    line-height: 80px;
    color: #05173b;
    float: left;
    margin-left: 20px;
    box-shadow: 6px 0 8px 1px #e0e0e0; /*no*/
    box-sizing: border-box;
}
.resource .channel-resources .content ul li:nth-child(1),.resource .media-resources .content ul li:nth-child(1) {
    margin-left: 0;
}
.resource .channel-resources .content ul li:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}
.resource .channel-resources .content ul .active {
   background-color: #1e90ff;
   color: #fff;
}
.resource .media-resources {
    margin-top: 150px;
}
.resource .media-resources .content ul li:nth-child(2) {
    margin-left: 110px;
}
.resource .media-resources .content ul li:nth-child(3) {
    margin-left: 100px;
}
.resource .media-resources .content ul .active {
    background-color: #1e90ff;
    color: #fff;
}
.resource .client {
    margin-top: 150px;
}
.resource .client .content {
    width: 670px;
    margin: 0 auto;
    margin-top: 60px;
}
.resource .client .content>div ul {
    height: 248px;
}
.resource .client .content>div ul li{
    float: left; 
}
.resource .client .content>div ul li .num {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 10px 0px 20px 1px #e0e0e0;
    line-height: 180px;
    text-align: center;
    position: relative;
}
.resource .client .content>div ul li .num p {
    font-size: 30px; /*px*/
    color: #05173b;
    letter-spacing: 2px;
    font-weight: 500;
}
.resource .client .content>div ul li .num p strong {
    font-size: 48px; /*px*/
    font-weight: 500;
}
.resource .client .content>div ul li .num i {
    position: absolute;
    top: 50px;
    right: 68px;
    font-size: 30px; /*px*/
    display: flex;
    line-height: normal;
    width: 16px;
    height: 16px;
    font-weight: 500;
}
.resource .client .content>div ul li>p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-top: .2rem;
    text-align: center;
}
.resource .client .content>div ul li:nth-child(2) {
    margin-left: 61px;
}
.resource .client .content>div ul li:nth-child(3) {
    margin-left: 60px;
}
.resource .client .content>div ul li:nth-child(2) .num i,.resource .client .content>div ul li:nth-child(3) .num i {
    right: 54px;
}
.resource .client .content .swiper {
    margin: 0 auto;
    height: 450px;
    width: 670px;
    margin-top: 110px;
    position: relative;
    padding-top: 10px;
}
.resource .client .content .swiper .swiper-container {
    width: 530px;
    margin: 0 auto;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide strong{
    font-size: 36px; /*px*/
    color: #05173b;
    text-align: center;
    width: 100%;
    display: block;
    height: 40px;
    line-height: 40px;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide p {
    font-size: 24px; /*px*/
    color: #708090;
    margin-top: .2rem;
    text-align: center;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul {
    margin-top: 60px;
    height: 300px;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul li {
    float: left;
    margin-left: 38px;
    width: 150px;
    height: 84px;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul li:nth-child(1),.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul li:nth-child(4),.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul li:nth-child(7) {
    margin-left: 0;
}
.resource .client .content .swiper .swiper-container .swiper-wrapper .swiper-slide ul li img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.resource .top {
    width: 64px;
    height: 64px;
    position: fixed;
    right: 10px;
    top: 800px;
    z-index: 1;
}
.resource .top a {
    display: inline-block;
    background: url("../../assets/img/top.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 64px;
}
@media screen and (max-width: 640px) and (min-width: 640px){
.resource .client .content>div ul li:nth-child(2),.resource .client .content>div ul li:nth-child(3) {
    margin-left: 60px;
}
.resource .client .content>div ul li:nth-child(3) {
    margin-left: 30px;
}
.resource .client .content>div ul li .num i {
    right: 65px;
    top: 42px;
}
.resource .client .content>div ul li:nth-child(2) .num i, .resource .client .content>div ul li:nth-child(3) .num i {
    top: 42px;
    right: 50px;
}
.resource .channel-resources .content ul li:nth-child(3) {
    width: 160px;
}
}
</style>
